<template>
  <div class="dialog_box">
    <el-dialog v-model="visible" width="500px" title="输单" @closed="onClose(formRef)">
      <div class="left">
        <el-icon class="warning"><WarningFilled /></el-icon>
      </div>
      <div class="right">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto">
          <el-form-item label="输单原因" prop="loss_id">
            <el-select v-model="formData.loss_id" placeholder="请选择输单原因">
              <el-option v-for="item in loseList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="text">设置输单之后，将不能更改，您确定要将【{{ businessName }}】设置为输单吗？</div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false" size="small">取消</el-button>
          <el-button @click="onSubmit(formRef)" type="primary" size="small">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { loseAdd, loseEdit, businessStage, getLoseList } from '@/api/salesleads/salesmanagement/business'
  import { ElMessage } from 'element-plus'
  import { onMounted, ref } from 'vue'
  import { reactive, defineEmits } from 'vue'
  const emit = defineEmits(['submit'])
  const visible: any = ref(false)
  const businessName = ref('')
  const formRef = ref<any>()
  const formData = reactive<any>({
    business_id: '', //商机ID
    state: 3, //类型1进行中 2赢单 3输单
    stage_id: '', //商机流程阶段ID
    loss_id: '' //输单原因id
  })
  const rules = reactive<any>({
    loss_id: [{ required: true, message: '请选择输单原因', trigger: 'blur' }]
  })
  const onSubmit = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
      if (valid) {
        businessStage(formData).then((res: any) => {
          visible.value = false
          ElMessage.success('阶段更新成功')
          emit('submit')
        })
      }
    })
  }
  const onClose = (formEl: any) => {
    formEl.resetFields()
  }
  const loseList = ref([])
  const onData = (row: any) => {
    businessName.value = row.name
    formData.business_id = row.business_id
    formData.stage_id = row.stage_id
    visible.value = true
    getLoseList({ state: 2 }).then((res: any) => {
      console.log('输单原因列表', res)
      loseList.value = res
    })
  }

  defineExpose({
    onData
  })
</script>

<style scoped lang="scss">
  .dialog_box {
    :deep(.el-dialog) {
      .el-dialog__header {
        border-bottom: 1px solid #eaeaea;
      }
      .el-dialog__body {
        display: flex;
        padding: 25px 35px 25px 25px;
        border-bottom: 1px solid #eaeaea;
        .left {
          width: 15%;
          display: flex;
          align-items: center;
          .warning {
            font-size: 50px;
            color: #ffa50f;
          }
        }
        .right {
          flex: 1;
          .el-form-item {
            margin-bottom: 10px;
            .el-select {
              width: 100%;
            }
          }
          .text {
            padding-left: 11px;
            line-height: 25px;
          }
        }
      }
      .el-dialog__footer {
        padding: 10px 20px;
      }
    }
  }
</style>
